<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>书阁 - 图书管理系统</title>
    <style>
        :root {
            --primary-dark: #0a0a0a;
            --secondary-dark: #1a1a1a;
            --accent-dark: #2a2a2a;
            --text-primary: #e0e0e0;
            --text-secondary: #a0a0a0;
            --accent-color: #4a90e2;
            --accent-gold: #d4af37;
            --success: #4caf50;
            --error: #f44336;
            --border-color: #333;
            --panel-bg: rgba(30, 30, 30, 0.8);
            --glow-color: rgba(74, 144, 226, 0.3);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }

        body {
            background-color: var(--primary-dark);
            color: var(--text-primary);
            min-height: 100vh;
            padding: 20px;
            background-image:
                linear-gradient(rgba(10, 10, 10, 0.9), rgba(10, 10, 10, 0.9)),
                repeating-linear-gradient(
                    0deg,
                    transparent,
                    transparent 1px,
                    rgba(30, 30, 30, 0.1) 1px,
                    rgba(30, 30, 30, 0.1) 2px
                );
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
        }

        header {
            text-align: center;
            padding: 30px 0;
            margin-bottom: 30px;
            position: relative;
        }

        header::after {
            content: "";
            display: block;
            width: 100px;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
            margin: 15px auto;
        }

        h1 {
            font-size: 2.5rem;
            font-weight: 300;
            letter-spacing: 3px;
            color: var(--text-primary);
            text-transform: uppercase;
        }

        .subtitle {
            font-size: 1rem;
            color: var(--text-secondary);
            letter-spacing: 2px;
            font-style: italic;
        }

        .main-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-bottom: 30px;
        }

        @media (max-width: 992px) {
            .main-content {
                grid-template-columns: 1fr;
            }
        }

        .panel {
            background: var(--panel-bg);
            border: 1px solid var(--border-color);
            border-radius: 4px;
            padding: 25px;
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(10px);
        }

        .panel::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
        }

        .panel-title {
            font-size: 1.3rem;
            margin-bottom: 20px;
            color: var(--accent-color);
            font-weight: 400;
            position: relative;
            padding-bottom: 10px;
        }

        .panel-title::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 30px;
            height: 1px;
            background: var(--accent-color);
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            color: var(--text-secondary);
            font-size: 0.9rem;
            letter-spacing: 0.5px;
        }

        input, select {
            width: 100%;
            padding: 12px 15px;
            background: rgba(20, 20, 20, 0.7);
            border: 1px solid var(--border-color);
            color: var(--text-primary);
            border-radius: 2px;
            transition: all 0.3s ease;
        }

        input:focus, select:focus {
            outline: none;
            border-color: var(--accent-color);
            box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
        }

        .btn-group {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin-top: 25px;
        }

        button {
            padding: 12px 15px;
            background: rgba(40, 40, 40, 0.8);
            border: 1px solid var(--border-color);
            color: var(--text-primary);
            cursor: pointer;
            border-radius: 2px;
            transition: all 0.3s ease;
            font-size: 0.9rem;
            letter-spacing: 0.5px;
        }

        button:hover {
            background: rgba(74, 144, 226, 0.1);
            border-color: var(--accent-color);
            box-shadow: 0 0 10px var(--glow-color);
        }

        .btn-delete {
            color: var(--error);
        }

        .btn-delete:hover {
            background: rgba(244, 67, 54, 0.1);
            border-color: var(--error);
            box-shadow: 0 0 10px rgba(244, 67, 54, 0.2);
        }

        .btn-query {
            color: var(--success);
        }

        .btn-query:hover {
            background: rgba(76, 175, 80, 0.1);
            border-color: var(--success);
            box-shadow: 0 0 10px rgba(76, 175, 80, 0.2);
        }

        .books-list {
            margin-top: 20px;
            max-height: 400px;
            overflow-y: auto;
        }

        .book-item {
            background: rgba(25, 25, 25, 0.6);
            border: 1px solid var(--border-color);
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 2px;
            position: relative;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .book-item:hover {
            background: rgba(40, 40, 40, 0.8);
            border-color: var(--accent-color);
            transform: translateY(-2px);
        }

        .book-title {
            font-size: 1.1rem;
            color: var(--accent-color);
            margin-bottom: 10px;
            font-weight: 400;
        }

        .book-info {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
            gap: 12px;
            font-size: 0.9rem;
        }

        .info-item {
            display: flex;
            flex-direction: column;
        }

        .info-label {
            color: var(--text-secondary);
            font-size: 0.8rem;
            margin-bottom: 3px;
        }

        .info-value {
            color: var(--text-primary);
            font-weight: 300;
        }

        .response-panel {
            margin-top: 25px;
            padding: 20px;
            background: rgba(20, 20, 20, 0.7);
            border: 1px solid var(--border-color);
            border-radius: 2px;
            max-height: 200px;
            overflow-y: auto;
        }

        .response-title {
            color: var(--accent-color);
            margin-bottom: 12px;
            font-size: 1rem;
        }

        .response-content {
            font-size: 0.85rem;
            font-family: 'Courier New', monospace;
            line-height: 1.5;
            color: var(--text-secondary);
            white-space: pre-wrap;
        }

        footer {
            text-align: center;
            margin-top: 40px;
            padding: 25px;
            color: var(--text-secondary);
            font-size: 0.9rem;
            border-top: 1px solid var(--border-color);
        }

        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 15px 20px;
            border-radius: 2px;
            color: white;
            font-size: 0.9rem;
            z-index: 1000;
            transform: translateX(200%);
            transition: transform 0.3s ease-in-out;
            border: 1px solid var(--border-color);
            background: var(--panel-bg);
            backdrop-filter: blur(10px);
        }

        .notification.show {
            transform: translateX(0);
        }

        .notification.success {
            border-left: 3px solid var(--success);
        }

        .notification.error {
            border-left: 3px solid var(--error);
        }

        .notification.warning {
            border-left: 3px solid var(--accent-gold);
        }

        .stats-panel {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
            margin-bottom: 25px;
        }

        .stat-card {
            background: rgba(25, 25, 25, 0.6);
            border: 1px solid var(--border-color);
            border-radius: 2px;
            padding: 15px;
            text-align: center;
        }

        .stat-value {
            font-size: 1.5rem;
            color: var(--accent-color);
            font-weight: 300;
            margin-bottom: 5px;
        }

        .stat-label {
            font-size: 0.8rem;
            color: var(--text-secondary);
            letter-spacing: 0.5px;
        }

        .action-buttons {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            margin-top: 20px;
        }

        .search-box {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
        }

        .search-box input {
            flex: 1;
        }

        .book-actions {
            display: flex;
            gap: 10px;
            margin-top: 15px;
            justify-content: flex-end;
        }

        .action-btn {
            padding: 6px 12px;
            font-size: 0.8rem;
            background: rgba(35, 35, 35, 0.8);
        }

        .empty-state {
            text-align: center;
            padding: 40px 20px;
            color: var(--text-secondary);
        }

        .scrollbar::-webkit-scrollbar {
            width: 6px;
        }

        .scrollbar::-webkit-scrollbar-track {
            background: rgba(20, 20, 20, 0.5);
        }

        .scrollbar::-webkit-scrollbar-thumb {
            background: var(--accent-color);
            border-radius: 3px;
        }

        .scrollbar::-webkit-scrollbar-thumb:hover {
            background: #5aa1e8;
        }

        .books-list, .response-panel {
            scrollbar-width: thin;
            scrollbar-color: var(--accent-color) rgba(20, 20, 20, 0.5);
        }

        /* 添加微妙的科技感元素 */
        .panel::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            background:
                radial-gradient(
                    ellipse at top left,
                    rgba(74, 144, 226, 0.03) 0%,
                    transparent 70%
                );
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>书阁</h1>
            <div class="subtitle">BOOK LIBRARY SYSTEM</div>
        </header>

        <!-- 统计面板 -->
        <div class="panel">
            <h2 class="panel-title">系统概览</h2>
            <div class="stats-panel">
                <div class="stat-card">
                    <div class="stat-value" id="totalBooks">0</div>
                    <div class="stat-label">藏书总量</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value" id="totalValue">¥0</div>
                    <div class="stat-label">总价值</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value" id="totalStock">0</div>
                    <div class="stat-label">库存总量</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value" id="avgPrice">¥0</div>
                    <div class="stat-label">平均价格</div>
                </div>
            </div>
        </div>

        <div class="main-content">
            <!-- 图书操作面板 -->
            <div class="panel">
                <h2 class="panel-title">图书管理</h2>
                <form id="bookForm">
                    <div class="form-group">
                        <label for="id">图书编号</label>
                        <input type="number" id="id" placeholder="系统自动生成" readonly>
                    </div>
                    <div class="form-group">
                        <label for="name">书名 *</label>
                        <input type="text" id="name" required>
                    </div>
                    <div class="form-group">
                        <label for="price">价格 *</label>
                        <input type="number" id="price" step="0.01" required>
                    </div>
                    <div class="form-group">
                        <label for="stock">库存 *</label>
                        <input type="number" id="stock" required>
                    </div>
                    <div class="form-group">
                        <label for="author">作者 *</label>
                        <input type="text" id="author" required>
                    </div>
                    <div class="btn-group">
                        <button type="button" id="addBtn">新增</button>
                        <button type="button" id="updateBtn">更新</button>
                        <button type="button" id="clearBtn">清空</button>
                    </div>
                </form>

                <div class="action-buttons">
                    <button type="button" id="queryAllBtn">刷新</button>
                    <button type="button" id="deleteBtn" class="btn-delete">删除</button>
                </div>
            </div>

            <!-- 图书列表面板 -->
            <div class="panel">
                <h2 class="panel-title">藏书列表</h2>
                <div class="search-box">
                    <input type="number" id="queryId" placeholder="输入图书编号">
                    <button type="button" id="queryByIdBtn" class="btn-query">查询</button>
                </div>

                <div class="books-list scrollbar" id="booksList">
                    <div class="empty-state">
                        <p>暂无藏书记录</p>
                        <p>点击"刷新"加载数据</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 响应面板 -->
        <div class="panel">
            <h2 class="panel-title">系统日志</h2>
            <div class="response-panel scrollbar">
                <div class="response-content" id="responseContent">等待操作指令...</div>
            </div>
        </div>

        <footer>
            <p>书阁 · 博古通今 汇聚智慧</p>
            <p>Powered by Modern Technology</p>
        </footer>
    </div>

    <!-- 通知 -->
    <div class="notification" id="notification"></div>

    <script>
        // API基础URL
        const BASE_URL = 'http://localhost:5555';

        // 获取DOM元素
        const elements = {
            id: document.getElementById('id'),
            name: document.getElementById('name'),
            price: document.getElementById('price'),
            stock: document.getElementById('stock'),
            author: document.getElementById('author'),
            queryId: document.getElementById('queryId'),
            booksList: document.getElementById('booksList'),
            responseContent: document.getElementById('responseContent'),
            totalBooks: document.getElementById('totalBooks'),
            totalValue: document.getElementById('totalValue'),
            totalStock: document.getElementById('totalStock'),
            avgPrice: document.getElementById('avgPrice'),
            notification: document.getElementById('notification')
        };

        // 绑定事件
        document.getElementById('addBtn').addEventListener('click', addBook);
        document.getElementById('updateBtn').addEventListener('click', updateBook);
        document.getElementById('deleteBtn').addEventListener('click', deleteBook);
        document.getElementById('queryByIdBtn').addEventListener('click', queryById);
        document.getElementById('queryAllBtn').addEventListener('click', queryAll);
        document.getElementById('clearBtn').addEventListener('click', clearForm);

        // 显示通知
        function showNotification(message, type = 'success') {
            elements.notification.textContent = message;
            elements.notification.className = `notification ${type} show`;

            setTimeout(() => {
                elements.notification.classList.remove('show');
            }, 3000);
        }

        // 显示响应信息
        function showResponse(data) {
            elements.responseContent.textContent = JSON.stringify(data, null, 2);
        }

        // 显示错误信息
        function showError(error) {
            elements.responseContent.textContent = `错误: ${error.message || error}`;
            showNotification('操作失败: ' + (error.message || error), 'error');
        }

        // 清空表单
        function clearForm() {
            elements.id.value = '';
            elements.name.value = '';
            elements.price.value = '';
            elements.stock.value = '';
            elements.author.value = '';
            showNotification('表单已清空', 'success');
        }

        // 更新统计信息
        function updateStats(books) {
            if (!books || books.length === 0) {
                elements.totalBooks.textContent = '0';
                elements.totalValue.textContent = '¥0';
                elements.totalStock.textContent = '0';
                elements.avgPrice.textContent = '¥0';
                return;
            }

            const totalBooks = books.length;
            const totalValue = books.reduce((sum, book) => sum + (book.price || 0) * (book.stock || 0), 0);
            const totalStock = books.reduce((sum, book) => sum + (book.stock || 0), 0);
            const avgPrice = totalBooks > 0 ? (books.reduce((sum, book) => sum + (book.price || 0), 0) / totalBooks).toFixed(2) : 0;

            elements.totalBooks.textContent = totalBooks;
            elements.totalValue.textContent = `¥${totalValue.toFixed(2)}`;
            elements.totalStock.textContent = totalStock;
            elements.avgPrice.textContent = `¥${avgPrice}`;
        }

        // 显示图书列表
        function displayBooks(books) {
            if (!books || books.length === 0) {
                elements.booksList.innerHTML = `
                    <div class="empty-state">
                        <p>暂无藏书记录</p>
                    </div>
                `;
                updateStats([]);
                return;
            }

            updateStats(books);

            let html = '';
            const booksArray = Array.isArray(books) ? books : [books];

            booksArray.forEach(book => {
                html += `
                    <div class="book-item" data-id="${book.id}" onclick="selectBook(${book.id})">
                        <div class="book-title">${book.name || '未知书名'}</div>
                        <div class="book-info">
                            <div class="info-item">
                                <span class="info-label">编号</span>
                                <span class="info-value">${book.id || 'N/A'}</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">价格</span>
                                <span class="info-value">¥${(book.price || 0).toFixed(2)}</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">库存</span>
                                <span class="info-value">${book.stock || 0}</span>
                            </div>
                            <div class="info-item">
                                <span class="info-label">作者</span>
                                <span class="info-value">${book.author || '佚名'}</span>
                            </div>
                        </div>
                        <div class="book-actions">
                            <button class="action-btn" onclick="editBook(${book.id}); event.stopPropagation();">编辑</button>
                            <button class="action-btn btn-delete" onclick="deleteBookById(${book.id}); event.stopPropagation();">删除</button>
                        </div>
                    </div>
                `;
            });

            elements.booksList.innerHTML = html;
        }

        // 选择图书
        function selectBook(id) {
            fillForm(id);
        }

        // 编辑图书
        function editBook(id) {
            fillForm(id);
        }

        // 填充表单
        function fillForm(id) {
            fetch(`${BASE_URL}/book/${id}`)
                .then(response => response.json())
                .then(data => {
                    if (data.code === 666) {
                        const book = data.data;
                        elements.id.value = book.id || '';
                        elements.name.value = book.name || '';
                        elements.price.value = book.price || '';
                        elements.stock.value = book.stock || '';
                        elements.author.value = book.author || '';
                        showResponse(data);
                        showNotification('已选中图书', 'success');
                    } else {
                        showError(data);
                    }
                })
                .catch(error => showError(error));
        }

        // 根据ID删除图书
        function deleteBookById(id) {
            if (!confirm('确定要删除这本图书吗？')) {
                return;
            }

            fetch(`${BASE_URL}/book/${id}`, {
                method: 'DELETE'
            })
            .then(response => response.json())
            .then(data => {
                showResponse(data);
                if (data.code === 666) {
                    showNotification('删除成功', 'success');
                    queryAll();
                } else {
                    showError(data);
                }
            })
            .catch(error => showError(error));
        }

        // 添加图书
        function addBook() {
            const bookData = {
                name: elements.name.value,
                price: parseFloat(elements.price.value),
                stock: parseInt(elements.stock.value),
                author: elements.author.value
            };

            if (!bookData.name || isNaN(bookData.price) || isNaN(bookData.stock) || !bookData.author) {
                showError('请填写所有必填字段');
                return;
            }

            fetch(`${BASE_URL}/book/add`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(bookData)
            })
            .then(response => response.json())
            .then(data => {
                showResponse(data);
                if (data.code === 666) {
                    showNotification('新增成功', 'success');
                    clearForm();
                    queryAll();
                } else {
                    showError(data);
                }
            })
            .catch(error => showError(error));
        }

        // 更新图书
        function updateBook() {
            const id = elements.id.value;
            if (!id) {
                showError('请先选择要更新的图书');
                return;
            }

            const bookData = {
                id: parseInt(id),
                name: elements.name.value,
                price: parseFloat(elements.price.value),
                stock: parseInt(elements.stock.value),
                author: elements.author.value
            };

            if (!bookData.name || isNaN(bookData.price) || isNaN(bookData.stock) || !bookData.author) {
                showError('请填写所有必填字段');
                return;
            }

            fetch(`${BASE_URL}/book/update`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(bookData)
            })
            .then(response => response.json())
            .then(data => {
                showResponse(data);
                if (data.code === 666) {
                    showNotification('更新成功', 'success');
                    clearForm();
                    queryAll();
                } else {
                    showError(data);
                }
            })
            .catch(error => showError(error));
        }

        // 删除图书
        function deleteBook() {
            const id = elements.id.value;
            if (!id) {
                showError('请先选择要删除的图书');
                return;
            }

            deleteBookById(id);
        }

        // 查询单本图书
        function queryById() {
            const id = elements.queryId.value;
            if (!id) {
                showError('请输入图书编号');
                return;
            }

            fetch(`${BASE_URL}/book/${id}`)
                .then(response => response.json())
                .then(data => {
                    showResponse(data);
                    if (data.code === 666) {
                        displayBooks([data.data]);
                        showNotification('查询成功', 'success');
                    } else {
                        showError(data);
                    }
                })
                .catch(error => showError(error));
        }

        // 查询所有图书
        function queryAll() {
            fetch(`${BASE_URL}/books`)
                .then(response => response.json())
                .then(data => {
                    showResponse(data);
                    if (data.code === 666) {
                        displayBooks(data.data);
                        showNotification(`加载了 ${Array.isArray(data.data) ? data.data.length : 1} 本图书`, 'success');
                    } else {
                        showError(data);
                    }
                })
                .catch(error => showError(error));
        }

        // 页面加载完成后查询所有图书
        window.onload = function() {
            queryAll();
        };
    </script>
</body>
</html>
